import React, { Component } from "react";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import { BillTableCell } from "../../../../component/billTableCell/BillTableCell";
import { BillDetailData } from "../../../../Redux/Action/bill/billAction";
import { connect } from "react-redux";

import "./index.scss";

class BillList extends Component {
	constructor(props) {
		super(props);
		this.state = {
			pageData: []
		};
	}
	// 点击列表
	cellSelectCallback(cellData) {
		this.props._billDetail({
			billDetail: {
				backPath: "#/billHome",
				tradeNo: cellData.tradeNo,
				tradeType: cellData.type
			}
		});
		this.props.history.push({
			pathname: "/billDetail",
			params: {
				backPath: "#/billHome",
				tradeNo: cellData.tradeNo,
				tradeType: cellData.type
			}
		});
	}
	render() {
		const { transactionList = [] } = this.props.billReducer;
		const _pageParams = {
			header: {
				title: "账单明细"
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="bill-list-container">
					{!!transactionList.length && (
						<div style={{ paddingBottom: "2rem" }}>
							{transactionList.map((item, index) => {
								return (
									<div key={index}>
										<BillTableCell
											cellData={item}
											cellSelectCallback={this.cellSelectCallback.bind(this)}
										></BillTableCell>
									</div>
								);
							})}
						</div>
					)}
					{transactionList.length <= 0 && (
						<div>
							<p className="no-remind">暂无消费记录</p>
						</div>
					)}
				</div>
			</MainLayout>
		);
	}
}
function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps(dispatch) {
	return {
		_billDetail: data => {
			dispatch(BillDetailData(data));
		}
	};
}

export default connect(mapStateToProps, mapDispatchToProps)(BillList);
